<template>
  <div>
    <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-model-item
        :label="item.name"
        v-for="(item, index) in config"
        :key="index"
        :prop="item.prop"
        :ref="item.prop"
      >
        <a-input v-model="form[item.prop]" v-if="item.type == 'input'" />
        <a-select v-model="form[item.prop]" v-if="item.type == 'select'">
          <a-select-option
            v-for="(option, index) in item.options"
            :value="option.id"
            :key="index"
          >
            {{ option.name }}
          </a-select-option>
        </a-select>
        <a-switch v-model="form[item.prop]" v-if="item.type == 'switch'" />
        <a-checkbox-group
          v-model="form[item.prop]"
          v-if="item.type == 'checkbox'"
        >
          <a-checkbox
            :value="checkbox.id"
            name="type"
            v-for="(checkbox, index) in item.checkboxs"
            :key="index"
          >
            {{ checkbox.name }}
          </a-checkbox>
        </a-checkbox-group>
        <a-radio-group v-model="form[item.prop]" v-if="item.type == 'radio'">
          <a-radio
            :value="radio.id"
            v-for="(radio, index) in item.radios"
            :key="index"
          >
            {{ radio.name }}
          </a-radio>
        </a-radio-group>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
export default {
  name: "autoForm",
  data() {
    return {
      config: [
        {
          name: "输入框",
          type: "input",
          prop: "input"
        },
        {
          name: "选择框",
          type: "select",
          prop: "select",
          options: [{ id: "111", name: "222" }]
        },
        {
          name: "开关",
          type: "switch",
          prop: "switch"
        },
        {
          name: "多选框",
          type: "checkbox",
          prop: "checkbox",
          checkboxs: [
            { id: "checkbox1", name: "checkbox1" },
            { id: "checkbox2", name: "checkbox2" }
          ]
        },
        {
          name: "单选框",
          type: "radio",
          prop: "radio",
          radios: [
            { id: "radio1", name: "radio1" },
            { id: "radio2", name: "radio2" }
          ]
        }
      ],
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      form: {}
    };
  },
  mounted() {
    console.log("this.$refs: ", this.$refs);
  },
  methods: {}
};
</script>

<style lang="less" scoped>
.line-form {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-bottom: 24px;
}
</style>
